<template>
	<div class="p_20 indexBanner">
		<el-dialog :visible.sync="isShow" :close-on-click-modal="false" @close="closeDialog">
			<el-divider content-position="left">产品发布编辑</el-divider>
			<el-form label-width="80px">
				<el-form-item label="当前产品">
					<!-- <el-input v-model="form.title" class="w_400"></el-input> -->
					<!-- 抗肿瘤-JS001 -->
					{{name}}
				</el-form-item>
				<el-form-item label="产品前">
					<!-- <el-input v-model="form.text1" class="w_400"></el-input> -->
					<div v-for="(item1,index) in product" :key="index" class="m_b_10">
						<el-select v-model="item1.language"  class="m_r_20" placeholder="选择语言" @change="getType(item1.language)">
							<el-option :value="0" label="简体"></el-option>
							<el-option :value="1" label="繁体"></el-option>
							<el-option :value="2" label="英文"></el-option>
						</el-select>
						<el-select v-model="item1.type"  class="m_r_20" placeholder="选择产品类型" @change="getProduct">
							<el-option 
								v-for="item in opt"
								:key="item.id"
								:value="item.id" 
								:label="item.name"
							></el-option>
						</el-select>
						<el-select v-model="item1.product"  class="m_r_20">
							<el-option 
								v-for="item in opt1"
								:key="item.id"
								:value="item.id" 
								:label="item.name"
							></el-option>
						</el-select>
						
						<el-button size="small" @click="del(1,index)">-</el-button>
					</div>
					<el-button size="small" @click="add(1)">+</el-button>
					
				</el-form-item>
				<el-form-item label="产品后">
					<!-- <el-input v-model="form.text2" class="w_400"></el-input> -->
					
					<div v-for="(item1,index) in product1" :key="index" class="m_b_10">
						<el-select v-model="item1.language"  class="m_r_20" placeholder="选择语言" @change="getType(item1.language)">
							<el-option :value="0" label="简体"></el-option>
							<el-option :value="1" label="繁体"></el-option>
							<el-option :value="2" label="英文"></el-option>
						</el-select>
						<el-select v-model="item1.type"  class="m_r_20" placeholder="选择产品类型" @change="getProduct">
							<el-option 
								v-for="item in opt"
								:key="item.id"
								:value="item.id" 
								:label="item.name"
							></el-option>
						</el-select>
						<el-select v-model="item1.product"  class="m_r_20">
							<el-option 
								v-for="item in opt1"
								:key="item.id"
								:value="item.id"
								:label="item.name"
							></el-option>
						</el-select>
						
						<el-button size="small" @click="del(2,index)">-</el-button>
					</div>
					<el-button size="small" @click="add(2)">+</el-button>
				</el-form-item>
				<!-- <UploadImg ref="UploadImg" :upImg = "upImg"></UploadImg> -->
				
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				opt:[],
				opt1:[],
				id:'',
				product_id:'',
				name:'',
				product:[
					{
						language:0,
						type:'',
						product:''
					}
				],
				product1:[
					{
						language:0,
						type:'',
						product:''
					}
				],
				//图片上传
				imageUrl: '',
				// dialogVisible: false,
				// disabled: false
			}
		},
		mounted() {
			this.getType(0);
		},
		methods: {
			//详情
			// getDetail(id){
			// 	this.axiosPost('Development/productShow' , {id:id,language:this.$store.getters.getLanguage} , res => {
			// 		if(res.data.code == 0) {
			// 			this.form = res.data.data;
			// 		}
			// 	})
			// },
			set(item) {
				this.id = item.id;
				this.product_id = item.product_id;
				this.name = item.product.name;
				
				if(item.before_info.length) {
					this.product = item.before_info.map(item1 => {
						this.getProduct(item1.category_id)
						let obj = {
							language:0,
							type:'',
							product:''
						}
						obj.language = item1.language
						obj.type = item1.category_id;
						obj.product = item1.id
						console.log(item1);
						return obj;
					})
				}
				if(item.after_info.length) {
					this.product1 = item.after_info.map(item1 => {
						this.getProduct(item1.category_id)
						let obj = {
							language:0,
							type:'',
							product:''
						}
						obj.language = item1.language
						obj.type = item1.category_id;
						obj.product = item1.id
						console.log(item1);
						return obj;
					})
				}
				
			},
			
			
			//产品类型
			getType(language){
				let params = {
					language : language
				}
				this.axiosPost("Development/categoryList", params, function(res) {
					// console.log(res);
					if(res.data.code === 0) {
						this.opt = res.data.data.data
					}
				})
			},
			
			//产品
			getProduct(type){
				console.log(type);
				let params = {
					category_id:type,
					language: this.$store.getters.getLanguage,
					page: 1,
					limit: 10000000000
				}
				this.axiosPost("Development/productList", params, function(res) {
					// console.log(res);
					if(res.data.code === 0) {
						this.opt1 = res.data.data.data;
					} 
					//分页
					// console.log(this.total);
				})
			},
			
			add(type){
				if(type == 1) {
					this.product.push({
						language:0,
						type:'',
						product:''
					})
				} else {
					this.product1.push({
						language:0,
						type:'',
						product:''
					})
				}
			},
			
			del(type,index){
				if(type == 1) {
					this.product.length > 1 ? this.product.splice(index , 1) : this.msgError('最少保留一个选项!可不填')
				} else {
					this.product1.length > 1 ?
					this.product1.splice(index , 1) : 
					this.msgError('最少保留一个选项!可不填')
				}
			},
			
			
			//提交
			submit(){
				let before = this.product.map(item => item.product)
				let after = this.product1.map(item => item.product)
				let params = {
					before_ids : before.toString(),
					product_id : this.product_id,
					after_ids : after.toString()
				}
				
				
				
				if(this.id) {
					this.edit(params);
				}
			},
			
			
			// //新增
			// add(params){
			// 	this.axiosGets('index/homepage/banner_add', params , res => {
			// 		if(res.data.code === 0) {
			// 			this.msgSuccess(res.data.msg);
			// 			this.$parent.getTableData();
			// 			this.isShow = false;
			// 		}
			// 	})
			// },
			
			//编辑
			edit(params) {
				this.axiosPost('Development/productLaunch', params , res => {
					if(res.data.code === 0) {
						this.msgSuccess(res.data.message);
						this.$parent.getTableData();
						this.isShow = false;
					}else {
						this.msgError(res.data.message)
					}
				})
			},


			
			
			//关闭窗口 清空数据
			closeDialog(){
				
				this.id = ''
				this.name = ''
				this.product = [
					{
						language:0,
						type:'',
						product:''
					}
				],
				this.product1 = [
					{
						language:0,
						type:'',
						product:''
					}
				],
				this.isShow = false;
			}
		}
	}
</script>

<style scoped>

</style>
